// 业务流水账代码
// 封装
function Button(id) {
    this.element = document.querySelector(`#${id}`);
    this.bindEvent();
}

Button.prototype.bindEvent = function() {
    // this 丢失问题
    // this Buttonn
    // this.element.addEventListener('click', function() {
    //     // this => this.element
    //     console.log(this);
    //     this.style.backgroundColor = 'red';
    // })

    // this.element.addEventListener('click', () => {
    //     console.log(this);
    //     this.element.style.backgroundColor = 'red';
    // })

    // this.element.addEventListener('click', function() {
    //     console.log(this);
    //     this.element.style.backgroundColor = 'red';
    // }.bind(this))

    this.element.addEventListener('click', this.setBgColor.bind(this));
}

Button.prototype.setBgColor = function() {
    this.element.style.backgroundColor = '#1abc9c';
}